Vue.component('img-block',{
    props:['url'],
    computed:{
        backurl:function(){
            return window.location.host + window.location.pathname.split('/').slice(0,-1).join('/') + '/'
        },
        target: function(name){

        }
    },
    template:
    `
    <div class="imgItem">
        <div>
        <img :src = "'http://' + backurl + url.name + '/'" style="height:90vh;"/>
        <div> {{ url.name }} </div>
        </div>
    </div>
    `
});

window.onload = ()=>{
    var main1 = new Vue({
        el : '#main',
        data:{
            imgList : [],
            imgType : ['.png','.jpg','.bmp','.jpeg','.webp','.psd'],
            backurl : ''
        }
        ,
        methods:{
            initImgList : function(){
                let backurl = window.location.pathname.split('/').slice(0,-1).join('/') + '/';
                this.backurl = backurl;
                var that = this;
                that.$http({
                    method:"GET",
                    url: "http://"+window.location.host + backurl
                }).then(function(data){
                    let ans = data.body;
                    for (let i = ans.length-1; i>=0; i--){
                        if (!this.isIMG(ans[i].name)){
                            ans.pop(i);
                        }
                    }
                    ans.sort((a,b)=>a.name.localeCompare(b.name));
                    this.imgList = ans;
                }).catch((err)=>{
                    console.log(err)
                });
            },
            isIMG : function(name){
                for (var i in this.imgType){
                    if (name.endsWith(this.imgType[i])){
                        return true
                    }
                }
                return false
            }
            ,
            back : function(){
                window.location.pathname = window.location.pathname.split('/').slice(0,-1).join('/');
            }
        },
        created:function(){
            this.initImgList();
        }
    });
}
